<template>
    <div class="bx-editor">
        <van-nav-bar
                title="信息编辑"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="title">
            基本信息
        </div>
        <div>
            <van-cell-group>
                <van-field v-model="phone" label="合作客户名称" placeholder="" size="large"  />
                <van-field v-model="phone" label="联系方式" placeholder="" size="large"  />
                <van-field v-model="phone" label="通讯地址" placeholder="" size="large"  />
                <van-field v-model="phone" label="详细信息" placeholder="" size="large"  />
                <van-field readonly clickable  label="所属行业" :value="industryValue" placeholder="--请选择--" @click="industryPicker = true" />
                <van-popup v-model="industryPicker" position="bottom">
                    <van-picker show-toolbar :columns="industryList" @cancel="industryPicker = false" @confirm="onIndustry" />
                </van-popup>
                <van-field readonly clickable  label="合作客户类型" :value="clientValue" placeholder="--请选择--" @click="clientPicker = true" />

                <van-popup v-model="clientPicker" position="bottom">
                    <van-picker show-toolbar :columns="clientList" @cancel="clientPicker = false" @confirm="onClient" />
                </van-popup>
                <van-field v-model="phone" label="价格" placeholder="" size="large"  />
                <van-field readonly clickable  label="所属业务员" :value="businessMan" placeholder="--请选择--" @click="showSelect = true" />

                <van-popup v-model="showSelect" position="bottom">
                    <div class=" businessMan-box">
                    <van-checkbox-group v-model="businessMan">
                        <van-checkbox name="a">复选框 a</van-checkbox>
                        <van-checkbox name="b">复选框 b</van-checkbox>
                        <van-checkbox name="c">复选框 c</van-checkbox>
                    </van-checkbox-group>
        </div>
        </van-popup>
        <van-field readonly clickable  label="业务员共享" :value="salesmanValue" placeholder="--请选择--" @click="salesmanPicker = true" />

        <van-popup v-model="salesmanPicker" position="bottom">
            <van-picker show-toolbar :columns="salesmanList" @cancel="salesmanPicker = false" @confirm="onSalesman" />
        </van-popup>
        <div class="radio">
            <div>是否产生佣金</div>
            <van-radio-group v-model="moneyRadio">
                <van-radio name="1" checked-color="#366cb3">是</van-radio>
                <van-radio name="2" checked-color="#366cb3">否</van-radio>
            </van-radio-group>
        </div>
        <van-field v-model="phone" label="佣金金额" placeholder="" size="large"  />
        <van-field v-model="mask" rows="3" autosize label="特殊要求备注" type="textarea" placeholder="请输入特殊要求备注" show-word-limit />
        <van-field v-model="mask" rows="3" autosize label="可延伸合作机会" type="textarea" placeholder="请输入可延伸的合作机会" show-word-limit />
        </van-cell-group>
    </div>
    <div class="title">
        发票信息
    </div>
    <div>
        <van-cell-group>

            <div class="radio">
                <div>是否允许后付款</div>
                <van-radio-group v-model="isPayRadio">
                    <van-radio name="1" checked-color="#366cb3">是</van-radio>
                    <van-radio name="2" checked-color="#366cb3">否</van-radio>
                </van-radio-group>
            </div>
            <div class="radio">
                <div>付款方式</div>
                <van-radio-group v-model="paymentRadio">
                    <van-radio name="1" checked-color="#366cb3">公对公付款</van-radio>
                    <van-radio name="2" checked-color="#366cb3">个人转账</van-radio>
                </van-radio-group>
            </div>
            <van-field readonly clickable  label="发票类型" :value="invoiceValue" placeholder="--请选择--" @click="invoicePicker = true" />

            <van-popup v-model="invoicePicker" position="bottom">
                <van-picker show-toolbar :columns="invoiceList" @cancel="invoicePicker = false" @confirm="onInvoice" />
            </van-popup>
            <van-field readonly clickable  label="开票类型" :value="makeInvoiceValue" placeholder="--请选择--" @click="makeInvoicePicker = true" />

            <van-popup v-model="makeInvoicePicker" position="bottom">
                <van-picker show-toolbar :columns="makeInvoiceList" @cancel="makeInvoicePicker = false" @confirm="onMakeInvoice" />
            </van-popup>
            <van-field readonly clickable  label="发票名称" :value="invoiceNameValue" placeholder="--请选择--" @click="invoiceNamePicker = true" />

            <van-popup v-model="invoiceNamePicker" position="bottom">
                <van-picker show-toolbar :columns="invoiceNameList" @cancel="invoiceNamePicker = false" @confirm="onInvoiceName" />
            </van-popup>
            <van-field v-model="phone" label="公司名称" placeholder="" size="large"  />
            <van-field v-model="phone" label="税号" placeholder="" size="large"  />
            <van-field v-model="phone" label="公司地址" placeholder="" size="large"  />
            <van-field v-model="phone" label="公司联系电话" placeholder="" size="large"  />
            <van-field v-model="phone" label="开户行" placeholder="" size="large"  />
            <van-field v-model="phone" label="开户账号" placeholder="" size="large"  />
            <div class="radio">
                <div>是否见票付款</div>
                <van-radio-group v-model="isVoucherRadio">
                    <van-radio name="1" checked-color="#366cb3">是</van-radio>
                    <van-radio name="2" checked-color="#366cb3">否</van-radio>
                </van-radio-group>
            </div>
        </van-cell-group>
    </div>

    <div class="foot-btn">
        <div class="blue-btn">保存</div>
        <div class="red-btn" @click="$router.go(-1)">取消</div>
    </div>
    <div style="height: 10vh;"></div>
    <footer-item></footer-item>
    </div>
</template>

<script>
import footerItem from '@/components/footer.vue'
import headerItem from '@/components/header.vue'

export default {
    name: "bxEditor",
    components: {
        footerItem, headerItem
    },
    data() {
        return {
            phone: '',
            industryValue: '',
            industryPicker: false,
            industryList: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            clientValue: '',
            clientPicker: false,
            clientList: ['1', '2', '3', '4', '5'],
            salesmanValue: '',
            salesmanPicker: false,
            salesmanList: ['小李', '小丽', '小莉', '小利', '晓丽'],
            invoiceValue: '',
            invoicePicker: false,
            invoiceList: ['电子发票', '纸质发票'],
            makeInvoiceValue: '',
            makeInvoicePicker: false,
            makeInvoiceList: ['增值税专用发票', '纸质发票'],
            invoiceNameValue: '',
            invoiceNamePicker: false,
            invoiceNameList: ['发票名称1', '发票名称2'],
            moneyRadio: '1',
            isPayRadio: '1',
            isVoucherRadio: '1',
            paymentRadio: '1',
            mask: '',
            businessMan: [],
            showSelect: false,

        }
    },
    methods: {
        // 所属行业
        onIndustry(value) {
            this.industryValue = value;
            this.industryPicker = false;
        },
        // 合作客户类型
        onClient(value) {
            this.clientValue = value;
            this.clientPicker = false;
        },
        // 合作客户类型
        onSalesman(value) {
            this.salesmanValue = value;
            this.salesmanPicker = false;
        },
        // 发票类型
        onInvoice(value) {
            this.invoiceValue = value;
            this.invoicePicker = false;
        },
        // 开票类型
        onMakeInvoice(value) {
            this.makeInvoiceValue = value;
            this.makeInvoicePicker = false;
        },
        // 公司名称
        onInvoiceName(value) {
            this.invoiceNameValue = value;
            this.invoiceNamePicker = false;
        },

    }
}
</script>

<style scoped lang="less">
.radio {
    display: flex;
    align-items: center;
    padding: 10px 15px;

    > div:nth-of-type(1) {
        width: 116px;
        font-size: 12px;
    }

    > div:nth-of-type(2) {
        font-size: 12px;
    }
}

.foot-btn {
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>